<template>
  <div v-if="show" class="gift-modal">
    <van-overlay :show="true" />
    <div class="popup-content">
      <img class="bg" src="@/assets/img/border-2.png" alt="" srcset="" />
      <img
        src="@/assets/img/close-2.png"
        alt=""
        class="close-icon"
        @click="closeModal"
      />
      <div class="prize-info">
        <div class="info-content">
          <h3 class="content-title">Sorry</h3>
          <div class="info">You missed the big reward</div>
        </div>
        <div class="info-btn" @click="tryAgain">{{ btnText }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MissGiftModal',
  data() {
    return {
      show: false,
      detail: {}
    }
  },
  computed: {
    btnText() {
      return 'Try again'
    }
  },
  created() {},
  methods: {
    showModal(data) {
      this.detail = data
      this.show = true
      return new Promise((resolve, reject) => {
        console.log(reject)
        this.callback = resolve
      })
    },
    callback() {},
    tryAgain() {
      this.show = false
      this.callback()
    },
    closeModal() {
      this.show = false
    }
  }
}
</script>
<style lang="less" scoped>
.gift-modal {
  .popup-content {
    position: fixed;
    width: 80%;
    z-index: 10;
    top: 3.4rem;
    left: 10%;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      width: 100%;
      z-index: -1;
    }
    .close-icon {
      position: absolute;
      right: -0.2rem;
      top: -0.3rem;
      width: 0.75rem;
    }
    .prize-info {
      position: absolute;
      left: 0.3rem;
      width: 5.4rem;
      top: 0.6rem;
      .info-content {
        margin: 0 auto;
        width: 80%;
        height: 4rem;
        border-radius: 0.3rem;
        color: #ff4111;
        font-size: 0.32rem;
        text-align: center;
        .content-title {
          font-size: 0.48rem;
          color: #959595;
        }
        .info {
          padding-top: 2.6rem;
          font-size: 0.27rem;
          color: #2f2f2f;
        }
      }
      .info-btn {
        width: 3.1rem;
        height: 0.8rem;
        line-height: 0.8rem;
        background: url('@/assets/img/receive-btn.png') no-repeat 0 0/100%;
        margin: 0 auto;
        text-align: center;
        color: #fff;
        font-size: 0.32rem;
      }
    }
  }
}
</style>
